<template>
  <div class="home">
    <header>
      <div class="header">
        <img src="../assets/左图.png" alt="">
        <p>
          <span>首页</span>
          <span>新手指南</span>
          <span>API</span>
          <span>关于</span>
          <span>注册</span>
          <span>登录</span>
        </p>
      </div>
    </header>
    <section>
      <div class="box">
        <!-- 主内容区 -->
        <div class="left">
          <router-link to="detail" tag="span" style="margin-right:10px;color: #80bd01;cursor: pointer;">全部</router-link>
          <router-link to="share" tag="span" style="margin-right:10px;color: #80bd01;cursor: pointer;">精华</router-link>
          <router-link to="serum" tag="span" style="margin-right:10px;color: #80bd01;cursor: pointer;">分享</router-link>
          <router-link to="essay" tag="span" style="margin-right:10px;color: #80bd01;cursor: pointer;">问答</router-link>
          <router-link to="job" tag="span" style="margin-right:10px;color: #80bd01;cursor: pointer;">招聘</router-link>
          <router-link to="test" tag="span" style="margin-right:10px;color: #80bd01;cursor: pointer;">客户端测试
          </router-link>
          <router-view class="twoPage" style="width:100%;"></router-view>
        </div>
        <!-- 右边五个盒子 -->
        <div class="right">
          <div class="top1">
            <p>哈哈哈哈哈哈哈哈哈或</p>
            <p>哈哈哈哈哈哈哈哈哈</p>
            <p>谢谢谢谢谢寻寻</p>
            <p>啦啦啦啦啦啦</p>
          </div>
          <div class="top2">
            <p>哈哈哈哈哈哈哈哈哈或</p>
            <p>哈哈哈哈哈哈哈哈哈</p>
            <p>谢谢谢谢谢寻寻</p>
            <p>啦啦啦啦啦啦</p>
          </div>
          <div class="top3">
            <p>哈哈哈哈哈哈哈哈哈或</p>
            <p>哈哈哈哈哈哈哈哈哈</p>
            <p>谢谢谢谢谢寻寻</p>
            <p>啦啦啦啦啦啦</p>
          </div>
          <div class="top4">
            <p>哈哈哈哈哈哈哈哈哈或</p>
            <p>哈哈哈哈哈哈哈哈哈</p>
            <p>谢谢谢谢谢寻寻</p>
            <p>啦啦啦啦啦啦</p>
          </div>
          <div class="top5">
            <p>哈哈哈哈哈哈哈哈哈或</p>
            <p>哈哈哈哈哈哈哈哈哈</p>
            <p>谢谢谢谢谢寻寻</p>
            <p>啦啦啦啦啦啦</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'Home',

  data() {
    return {

    };
  },

  mounted() {

  },

  methods: {

  },
};
</script>
<style lang="scss">
.home {
  display: flex;
  flex-direction: column;

  &>header {
    width: 100%;
    height: 60px;
    background-color: #444444;

    .header {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      // background-color: red;
      display: flex;
      justify-content: space-between;

      img {
        width: 40%;
        height: 100%;
      }

      p {
        width: 26%;
        height: 100%;
        line-height: 60px;
        color: white;
        cursor: pointer;

        span {
          margin-right: 9.5px;
        }
      }
    }
  }

  &>section {
    flex: 1;
    background-color: #e1e1e1;
    padding-top: 20px;

    .box {
      width: 90%;
      // height: 600px;
      margin: 0 auto;
      border-radius: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .left {
        width: 75%;
        background-color: white;

        .tab {
          span {
            color: green;
          }
        }
      }

      .right {
        width: 20%;

        // height: 600px;
        // background-color: red;
        .top1 {
          width: 100%;
          height: 160px;
          background-color: white;
          margin-bottom: 20px;
        }

        .top2 {
          width: 100%;
          height: 200px;
          background-color: white;
          margin-bottom: 20px;
        }

        .top3 {
          width: 100%;
          height: 400px;
          background-color: white;
          margin-bottom: 20px;
        }

        .top4 {
          width: 100%;
          height: 300px;
          background-color: white;
          margin-bottom: 20px;
        }

        .top5 {
          width: 100%;
          height: 400px;
          background-color: white;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>